<template>
  <a-row :gutter="16">
    <a-col :span="6">
      <deptTreeSync :rootOpened="true" :multi="true" @onCheck="treeCheck"></deptTreeSync>
    </a-col>
    <a-col :span="10">
      <a-table
        ref="table"
        size="small"
        rowKey="id"
        :columns="columns"
        :scroll="{ y: 540 }"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="name-table">
        <template slot="departName" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="10"/>
        </template>
        <template slot="realname" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="8"/>
        </template>
      </a-table>
    </a-col>
    <a-col :span="8">
      <a-table
        ref="table"
        size="small"
        rowKey="id"
        :columns="columns1"
        :scroll="{ y: 540 }"
        :dataSource="rightArr"
        :pagination="false"
        class="name-table">
        <template slot="departName" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="13"/>
        </template>
        <template slot="realname" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="3"/>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button @click="remove(record)" type="link" title="删除">
            <a-icon type="close" style="color:red"/>
          </a-button>
        </template>
      </a-table>
    </a-col>
  </a-row>
</template>

<script>
  import deptTreeSync from '../deptTreeSync'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction, httpAction} from '@/api/manage'

  const columns1 = [
    {
      title: '部门',
      align: 'center',
      dataIndex: 'departName',
      scopedSlots: {customRender: 'departName'},
      key: 'departName'
    },
    {
      title: '姓名',
      align: 'center',
      width: 70,
      dataIndex: 'realname',
      scopedSlots: {customRender: 'realname'},
      key: 'realname'
    },
    // {
    //   title: '操作',
    //   dataIndex: 'action',
    //   align: 'center',
    //   width: 40,
    //   slots: {title: 'actionName'},
    //   scopedSlots: {customRender: 'action'}
    // }
  ]

  const columns = [
    {
      title: '部门',
      align: 'center',
      dataIndex: 'departName',
      scopedSlots: {customRender: 'departName'},
      key: 'departName'
    },
    {
      title: '姓名',
      align: 'center',
      dataIndex: 'realname',
      scopedSlots: {customRender: 'realname'},
      key: 'realname'
    }
  ]
  export default {
    name: 'DownForm',
    mixins: [JeecgListMixin],
    components: {deptTreeSync},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data() {
      return {
        singleChoice: true,
        model: {},
        rightArr: [],
        downList:[],
        initList:[], // 加载进来的right数据
        middleArr: [],
        columns: columns,
        columns1: columns1,
        queryParam: {},
        confirmLoading: false,
        disableMixinCreated: true,
        url: {
          list: '/sjtb/dataCollectionTemplateFile/deparusertlist'
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
    },
    watch: {
      selectionRows(val) {
        if (this.middleArr.length > 0) {
          if (this.selectedRowKeys.length < this.rightArr.length) {
            let smallArr = []
            for (let i = 0; i < this.selectedRowKeys.length; i++) {
              for (let j = 0; j < this.rightArr.length; j++) {
                if (this.rightArr[j].id === this.selectedRowKeys[i]) {
                  smallArr.push(this.rightArr[j])
                }
              }
            }
            this.rightArr = []
            this.rightArr = [...smallArr]
            this.middleArr = [...this.rightArr]
          } else {
            this.rightArr = []
            let AndArr = [...this.middleArr, ...val]
            this.rightArr = this.uniqueArray(AndArr)
          }
        } else {
          this.rightArr = []
          this.rightArr = [...val]
        }
      }
    },
    methods: {
      uniqueArray(arr) {
        let map = new Map();
        for (let item of arr) {
          if (!map.has(item.id)) {
            map.set(item.id, item);
          }
        }
        return [...map.values()];
      },
      treeCheck(data) {
        this.middleArr = [...this.initList]
        if (data.length > 0) {
          this.queryParam.depId = data.toString()
          this.loadData(1)
          let tempSelectRows =  this.selectionRows;
          this.selectionRows = []
          this.selectionRows = tempSelectRows;
        } else {
          this.dataSource = []
          this.queryParam.depId = ''
        }
      },
      getOnDown() {
        getAction('/sjtb/dataCollectionTemplateFile/getReporterlist', {
          templateId: this.model.id,
          versionId: this.model.versionId,
          reportPeriod: this.model.reportPeriod
        }).then((res) => {
          if (res.success) {
            // this.rightArr = res.result
            this.initList = res.result
            this.downList = res.result
            for (let item of res.result) {
              this.selectedRowKeys.push(item.id)
            }
          }
        })
      },
      edit(record, singleChoice = true) {
        this.model = record
        this.singleChoice = singleChoice;
        if(singleChoice) {
          this.getOnDown()
        }
        this.visible = true
      },
      submitForm() {
        // 触发表单验证
        this.confirmLoading = true
        let depId = [];
        let reporter = [];
        for(let item of this.downList){
          this.rightArr.splice(this.rightArr.indexOf(item), 1);
        }
        for (let item of this.rightArr) {
          depId.push(item.depId)
          reporter.push(item.id)
        }
        if(this.singleChoice) {
          httpAction('/sjcj/dataCollectionTask/add', {
            reporter: reporter.toString(),
            depId: depId.toString(),
            versionId: this.model.versionId,
            templateId: this.model.id
          }, 'post').then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }else {
          httpAction('/sjcj/dataCollectionTask/addBatch', {
            reporter: reporter.toString(),
            depId: depId.toString(),
            versionIds: this.model.versionId,
            templateIds: this.model.id
          }, 'post').then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .name-table {
    /deep/ .ant-table-small {
      height: 542px;
    }

    /deep/ .ant-btn-link {
      padding: 0 5px !important;
    }

    /deep/ .ant-table-thead {
      display: none;
    }

    /deep/ .ant-btn-link {
      height: 20px !important;
    }
  }
</style>